<template>
	<view class="main-content">
		<HeaderTop></HeaderTop>
		<view class="common-normal-box patch-category">
			<view v-for="(item,index) in categoryList" :key="index" class="category" 
			:class="item.class" @click="jumpToPage(item)">
				<text class="big-title">{{item.title}}</text>
				<text class="small-title">{{item.subtitle}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
	export default {
		data() {
			return {
				categoryList:[{
					mode:'3',
					class:'p-one',
					title:'考试模式',
					subtitle:'创新考试新模式',
					url:'/pages/exam/exam'
				},{
					mode:'2',
					class:'p-two',
					title:'迎宾模式',
					subtitle:'迎宾新模式',
					url:'/pages/welcome/welcome'
				},{
					mode:'1',
					class:'p-three',
					title:'班牌模式',
					subtitle:'开启你的智慧校园之旅',
					url:'/pages/index/index'
				}]
			};
		},
		components:{
			HeaderTop
		},
		methods:{
			jumpToPage(item){
				this.$store.commit('setUserInfo',{currentMode:item.mode});
				
				uni.navigateTo({
					url:item.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.patch-category {
	width:96%;
	margin: 7.81upx auto;
	border-radius: 5.86upx;
	height:351.56upx;
	padding: 11.72upx;
	display: flex;
	align-items: center;
	justify-content: center;
	.category {
		width:177.34upx;
		height:124.22upx;
		margin:11.72upx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 19.53upx;
		line-height: 30.44upx;
		&.p-one {
			background: url($imageurl+'/introduce/kind-exam.jpg') left top no-repeat;
			background-size:100%;
		}
		&.p-two {
			background: url($imageurl+'/introduce/kind-welcome.jpg') left top no-repeat;
			background-size:100%;
		}
		&.p-three {
			background: url($imageurl+'/introduce/kind-class.jpg') left top no-repeat;
			background-size:100%;
		}
		.big-title {
			font-weight: bold;
			font-size: 16.41upx;
			color: #FFFFFF;
			line-height: 16.41upx;
			text-align: left;
		}
		.small-title {
			font-weight: 500;
			font-size: 10.16upx;
			color: rgba(255,255,255,0.7);
		}
	}
}
</style>
